<template>
	<!-- 设置提示框显示提示文本 -->
	<div>

		<div class="alertTS">
			<el-alert title="温馨提示！搜索房屋未缴费账单，完成账单收费" type="warning">
			</el-alert>
		</div>

		<div class="table-container">

			<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
				label-width="68px">
				<el-form-item label="小区" prop="communityId">
					<el-select v-model="queryWbu.communityId" placeholder="请选择小区" @keyup.enter.native="handleQuery">
						<el-option v-for="item in communityList" :key="item.communityId" :label="item.communityName"
							:value="item.communityId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="楼座" prop="balconyId">
					<el-select v-model="queryWbu.balconyId" placeholder="请选择楼座" @keyup.enter.native="handleQuery">
						<el-option v-for="item in balconyList" :key="item.balconyId" :label="item.balconyName"
							:value="item.balconyId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="单元" prop="unitId">
					<el-select v-model="queryWbu.unitId" placeholder="请选择单元" @keyup.enter.native="handleQuery">
						<el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName"
							:value="item.unitId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房号" prop="homeId">
					<el-select v-model="queryWbu.homeId" placeholder="请选择房号" @keyup.enter.native="handleQuery">
						<el-option v-for="item in homeList" :key="item.homeId" :label="item.homeNumber"
							:value="item.homeId">
						</el-option>
					</el-select>
				</el-form-item>
				<div class="submit">
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</div>
			</el-form>

		</div>
	</div>

</template>


<script>
	import {
		getCommunity,
		getBalconyUnitHome
	} from "@/api/charge/allocation";

	export default {
		data() {
			return {
				// 遮罩层
				loading: true,
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 费用生成表格数据
				makeList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 搜索参数
				queryParams: {
					id: [],
				},
				// 小区列表数据
				communityList: [],
				// 楼座列表数据
				balconyList: [],
				// 单元列表数据
				unitList: [],
				// 房间列表数据
				homeList: [],
				queryWbu: {
					communityId: null,
					balconyId: null,
					unitId: null,
					homeId: null
				},
			}
		},
		created() {
			this.getCommunityList()
		},
		methods: {
			search() {
				const id = this.queryParams.id;
				if (id) {
					//页面跳转
					this.$router.push({
						path: '/rcgl/jnfy/jnfyInfo',
						query: {
							id
						}
					})
				}
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.queryWbu = {
					communityId: null,
					balconyId: null,
					unitId: null,
					homeId: null
				};
			},
			/* 获取小区列表 */
			getCommunityList() {
				getCommunity().then(res => {
					this.communityList = res.data
				})
			},
		},
		watch: {
			'queryWbu.communityId': {
				handler() {

					this.balconyList = []
					this.unitList = []
					this.homeList = []
					this.queryWbu.balconyId = null
					this.queryWbu.unitId = null
					this.queryWbu.homeId = null

					this.queryParams.balconyunithomeIds = null
					this.queryParams.communicateId = null
					getBalconyUnitHome(this.queryWbu).then(res => {
						this.balconyList = res.data[0]
						// if (res.data.length > 3) {
						// 	this.queryParams.balconyunithomeIds = res.data[3]
						// 	this.form.balconyunithomeIds = res.data[3]
						// }
						// this.queryParams.communicateId = this.queryWbu.communityId
						// this.form.communicateId = this.queryWbu.communityId
					})
				},
				deep: true,
				immediate: true
			},
			'queryWbu.balconyId': {
				handler() {


					this.unitList = []
					this.homeList = []
					this.queryWbu.unitId = null
					this.queryWbu.homeId = null

					this.queryParams.balconyunithomeIds = null
					this.queryParams.communicateId = null
					getBalconyUnitHome(this.queryWbu).then(res => {
						this.unitList = res.data[1]
						// if (res.data.length > 3) {
						// 	this.queryParams.balconyunithomeIds = res.data[3]
						// 	this.form.balconyunithomeIds = res.data[3]
						// }
						// this.queryParams.communicateId = this.queryWbu.communityId
					})
				},
				deep: true,
				immediate: true
			},
			'queryWbu.unitId': {
				handler() {

					this.homeList = []
					this.queryWbu.homeId = null

					this.queryParams.balconyunithomeIds = null
					this.queryParams.communicateId = null
					getBalconyUnitHome(this.queryWbu).then(res => {
						this.homeList = res.data[2]
						// if (res.data.length > 3) {
						// 	this.queryParams.balconyunithomeIds = res.data[3]
						// 	this.form.balconyunithomeIds = res.data[3]
						// }
						// this.queryParams.communicateId = this.queryWbu.communityId
					})
				},
				deep: true,
				immediate: true
			},
			'queryWbu.homeId': {
				handler() {
					this.queryParams.balconyunithomeIds = null
					this.queryParams.communicateId = null
					getBalconyUnitHome(this.queryWbu).then(res => {
						if (res.data.length > 3) {

							this.queryParams.id = res.data[3]
						}


					})
				},
				deep: true,
				immediate: true
			}
		}
	};
</script>


<style>
	.submit {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.alertTS {
		width: 95%;
		/* 居中 */
		margin: 0 auto;
	}

	.table-container {
		box-shadow: 0 0 10px rgba(85, 85, 85, 0.3);
		height: 300px;
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		width: 90%;
		margin: 0 auto;
		margin-top: 30px;
	}
</style>